<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
	  <ul id="message">
		<li v-for="msg in messages">
		  {{ msg }}
		</li>
	  </ul>
	</div>
	<script>
	var app = new Vue({
	  el: '#app',
	  data: {
		messages:[]
	  }
	})
	</script>
    
    <script>
        // 创建一个Socket实例
		var socket = new WebSocket('ws://localhost'); 

		// 打开Socket 
		socket.onopen = function(event) { 

		  var msg = 'I am the client and I\'m listening!';
		  // 发送一个初始化消息
		  socket.send(msg); 
		  app.messages.push(msg);
		  // 关闭Socket.... 
		  //socket.close() 
		};

		// 监听消息
		socket.onmessage = function(event) { 
		console.log('Client received a message',event); 
		app.messages.push(event.data);
		}; 

		// 监听Socket的关闭
		socket.onclose = function(event) { 
		console.log('Client notified socket has closed',event); 
		app.messages.push(event);
		}; 
		socket.onerror = function(evt) {  
		console.log("WebSocketError!");  
		app.messages.push(evt.data);
		}; 
    </script>
</body>
</html>